<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { copyText } from '@/utils/copyTextToClipboard'
import { HttpCodeEnum } from '@packages/share/enums'
import { ElMessage } from 'element-plus'
import { assignObject } from '@/utils/object'
import { getSocialInfoAPI } from '@/api/search/index'

import { ElIcon, ElButton, ElTag, ElTabs, ElTabPane } from 'element-plus'
import type { AxiosResponse } from 'axios'
import { DocumentCopy, Location, MapLocation, Monitor, Position } from '@element-plus/icons-vue'
import SystemTab from './components/institution/systemTab.vue'
import HostTab from './components/institution/domainTab.vue'
import EmailTab from './components/institution/emailTab.vue'
import PersonTab from './components/institution/personTab.vue'
import CodeTab from './components/institution/codeTab.vue'
import MoreTab from './components/institution/moreTab.vue'
import AMAP from '../components/Amap.vue'

const route = useRoute()
const id = ref(`${route.params.id}`)
const activeName =ref('system') 

const infos = reactive({
  name: '',
  type: '',
  location: '',
  phone: '',
  email: '',
  legal: '',
  updateTime: '',
  longitude: 0,
  latitude: 0
})

const tabNum = reactive({
  system: 24,
  host: 24,
  email: 24,
  person: 24,
  code: 24,
  more: 24
})

// 资产调查
const open = () => {}
// 基础数据
const getInfo = (id: string) => {
  getSocialInfoAPI(id).then((res: AxiosResponse) => {
    const { data, code, message } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      assignObject(infos, data)
    } else ElMessage.error(message)
  })
}


onMounted(() => {
  getInfo(id.value)
})
</script>

<template>
  <div class="jm-container flex jm-mainbox">
    <div class="info-view flex">
      <div class="left jm-bg-color flex">
        <img src="@/assets/images/e.png" alt="" class="img" />
        <div class="infos">
          <div class="title flex">
            <div class="ip">{{ infos.name }}</div>
            <el-icon @click="copyText(infos.name)" class="pointer"><DocumentCopy /></el-icon>
          </div>
          <el-tag class="tags" type="primary">
            {{ infos.type }}
          </el-tag>
          <div class="numbers flex">
            <div>注册地址：{{ infos.location }}</div>
            <div>电话：{{ infos.phone }}</div>
          </div>
          <div class="location flex">
            <div>{{ `邮箱：${infos.email}` }}</div>
            <div>{{ `法人：${infos.legal}` }}</div>
            <!-- <div class="flex">
              <el-button :icon="Position" @click="open" link type="primary">机构调查</el-button>
            </div> -->
          </div>
          <div class="update">{{ `最新更新时间：${infos.updateTime}` }}</div>
        </div>
      </div>
      <div class="map jm-bg-color">
        <AMAP v-model:longitude="infos.longitude" v-model:latitude="infos.latitude" v-model:title="infos.name" />
      </div>
    </div>
    <div class="tab-view jm-bg-color">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="`信息系统(${tabNum.system})`" name="system">
          <SystemTab v-if="activeName === 'system'" v-model:id="id" />
        </el-tab-pane>
        <el-tab-pane :label="`域名解析(${tabNum.host})`" name="host">
          <HostTab v-if="activeName === 'host'" v-model:id="id" />
        </el-tab-pane>
        <el-tab-pane :label="`邮箱(${tabNum.email})`" name="email">
          <EmailTab v-if="activeName === 'email'" v-model:id="id" v-model:orgName="infos.name" />
        </el-tab-pane>
        <el-tab-pane :label="`人员(${tabNum.person})`" name="person">
          <PersonTab v-if="activeName === 'person'" v-model:id="id" v-model:orgName="infos.name" />
        </el-tab-pane>
        <el-tab-pane :label="`代码(${tabNum.code})`" name="code">
          <CodeTab v-if="activeName === 'code'" v-model:id="id" v-model:orgName="infos.name" />
        </el-tab-pane>
        <el-tab-pane :label="`更多(${tabNum.more})`" name="more">
          <MoreTab v-if="activeName === 'more'" v-model:id="id" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.flex {
  display: flex;
}
.pointer {
  font-size: 1.25rem;
  cursor: pointer;
}
.jm-container {
  flex-direction: column;
  padding: 0;
  .info-view {
    justify-content: space-between;
    height: 15.625rem;
    .left {
      padding: 0.625rem;
      width: 73%;
      height: 100%;
      .img {
        height: 100%;
      }
      .infos {
        padding: 1.25rem 0.3125rem;
        .title {
          align-items: center;
          margin-bottom: 0.625rem;
          .ip {
            font-size: 1.375rem;
            font-weight: 700;
            margin-right: 0.625rem;
          }
        }
        .numbers {
          margin-top: 0.625rem;
          div {
            margin-right: 1.25rem;
          }
        }
        .location {
          margin-top: 0.625rem;
          > div {
            align-items: center;
            margin-right: 1.25rem;
            .icon {
              margin-right: 0.3125rem;
            }
          }
        }
        .update {
          margin-top: 0.625rem;
          color: var(--el-color-info-light-5);
        }
      }
    }
    .map {
      width: 26%;
      height: 100%;
    }
  }
  .tab-view {
    padding: 0.625rem 1.25rem;
    margin-top: 0.625rem;
    min-height: 12.5rem;
  }
}
</style>
